<!DOCTYPE html>
<html  theme="system"  lang="en">
  <head>
<title>videojs-player | Homepage</title>
<meta name="twitter:widgets:new-embed-design" content="on">
<meta name="color-scheme" content="light dark">
<meta name="keywords" content="videojs-player examples,How to use videojs-player">
<meta name="description" content="videojs-player GitHub homepage">
<meta property="og:url" content="https://github.surmon.me/videojs-player">
<meta property="og:image" content="https://opengraph.githubassets.com/1723926138131/surmon-china/videojs-player">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="600">
<meta name="twitter:site" content="@surmon7788">
<meta name="twitter:creator" content="surmon7788">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="videojs-player | Homepage">
<meta name="twitter:image" content="https://opengraph.githubassets.com/1723926138131/surmon-china/videojs-player">
<meta name="twitter:description" content="videojs-player GitHub homepage">
<meta property="og:site_name" content="Surmon's open-source projects">
<meta property="og:type" content="object">
<meta property="og:title" content="videojs-player | Homepage">
<meta property="og:description" content="videojs-player GitHub homepage">
<meta property="og:image:alt" content="videojs-player GitHub homepage">
    <meta charset="UTF-8" />
    
    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
    <link rel="icon" type="image/svg+xml" href="/favicons/favicon.svg" />
    <link rel="alternate" type="image/png" href="/favicons/favicon.png" />
    <link rel="mask-icon" href="/favicons/pinned-octocat.svg" color="#000000" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- Google search console -->
    <meta name="google-site-verification" content="CNWDKal1HwPI4bIhG5jkySW65FQxwPmYGt7K_gqjY38" />
    <!-- Google analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-WNSSKPKKMG"></script>
    <script>
      window.dataLayer = window.dataLayer || []
      function gtag() {
        dataLayer.push(arguments)
      }
      gtag('js', new Date())
      gtag('config', 'G-WNSSKPKKMG')
    </script>
    <script type="module" crossorigin src="/assets/index-DtbE5QCi.js"></script>
    <link rel="stylesheet" crossorigin href="/assets/style-CqmeC_X-.css">
  </head>
  <body >
    <div id="app"><div class="vue-renderer" data-v-7c10dc62><header class="navbar" data-v-7c10dc62 data-v-678f463b><div class="container" data-v-678f463b><div class="left" data-v-678f463b><a href="https://github.com/surmon-china" rel="external nofollow noopener" target="_blank" class="item github" data-v-678f463b><i class="iconfont icon-github" data-v-678f463b></i><span class="text" data-v-678f463b>surmon-china</span></a><span class="dot" data-v-678f463b>/</span><a href="https://github.com/surmon-china/videojs-player" rel="external nofollow noopener" target="_blank" class="item repository" data-v-678f463b><span class="text" data-v-678f463b>videojs-player</span></a></div><div class="right" data-v-678f463b><button class="item theme" title="System theme" data-v-678f463b><i class="icon-system-theme iconfont" data-v-678f463b></i></button><div class="item project" data-v-678f463b><span class="text" data-v-678f463b>Projects</span><i class="iconfont icon-arrow-down" data-v-678f463b></i><div class="mask" data-v-678f463b></div><div class="projects" data-v-678f463b><div class="container" data-v-678f463b><div class="loading" data-v-678f463b data-v-0c9f81db><div class="animation" data-v-0c9f81db><!--[--><div data-v-0c9f81db></div><div data-v-0c9f81db></div><div data-v-0c9f81db></div><div data-v-0c9f81db></div><div data-v-0c9f81db></div><!--]--></div></div></div></div></div></div></div></header><div id="share" data-v-7c10dc62 data-v-154fd519><button class="share-button" title="Share to Twitter" data-v-154fd519><i class="iconfont icon-twitter-x" data-v-154fd519></i><span class="text" data-v-154fd519>Tweet</span></button></div><div id="toolbox" class="toolbox" data-v-7c10dc62 data-v-7bf94a39><div class="container" data-v-7bf94a39><div class="tools" data-v-7bf94a39><a href="https://github.com/sponsors/surmon-china" rel="external nofollow noopener" target="_blank" class="item sponsor" data-v-7bf94a39><i class="iconfont icon-heart" data-v-7bf94a39></i><i class="iconfont icon-heart-fill" data-v-7bf94a39></i></a><a href="https://github.com/surmon-china/videojs-player" rel="external nofollow noopener" target="_blank" class="item github" title="to GitHub homepage" data-v-7bf94a39><i class="iconfont icon-github" data-v-7bf94a39></i></a><button class="item to-top" data-v-7bf94a39><i class="iconfont icon-arrow-up" data-v-7bf94a39></i></button></div></div></div><!--[--><main class="homepage" data-v-909800f6><!----><div class="banner" data-v-909800f6 data-v-03c52228><div class="banner-content" data-v-03c52228><div class="title-skeleton" data-v-03c52228><div class="skeleton" style="border-radius:2px;" data-v-03c52228 data-v-7aefffbb></div></div><div class="subtitle-skeleton" data-v-03c52228><div class="skeleton" style="border-radius:2px;" data-v-03c52228 data-v-7aefffbb></div></div><div class="buttons-skeleton" data-v-03c52228><!--[--><div class="item-skeleton" data-v-03c52228><div class="skeleton" style="border-radius:2px;" data-v-03c52228 data-v-7aefffbb></div></div><div class="item-skeleton" data-v-03c52228><div class="skeleton" style="border-radius:2px;" data-v-03c52228 data-v-7aefffbb></div></div><div class="item-skeleton" data-v-03c52228><div class="skeleton" style="border-radius:2px;" data-v-03c52228 data-v-7aefffbb></div></div><div class="item-skeleton" data-v-03c52228><div class="skeleton" style="border-radius:2px;" data-v-03c52228 data-v-7aefffbb></div></div><!--]--></div></div></div><div class="container" data-v-909800f6><div class="homepage-card homepage-mammon" data-v-909800f6 data-v-84eeb999><!----><div class="content" data-v-84eeb999><!--[--><!----><!--]--></div></div><!--[--><div class="examples" data-v-cb6e1e68><!--teleport start--><!--teleport end--><!--[--><div class="example-item" data-v-cb6e1e68><div class="homepage-card" data-v-cb6e1e68 data-v-84eeb999><div class="header" data-v-84eeb999><span data-v-84eeb999>Advanced player (Vue)</span><!--[--><div class="actions" data-v-cb6e1e68><!--[--><!--]--><button class="code-button" data-v-cb6e1e68><i class="iconfont icon-code" data-v-cb6e1e68></i></button></div><!--]--></div><div class="content" data-v-84eeb999><!--[--><!--[--><div class="video-player-example"><div class="example" data-v-68036a57><div class="playlist" data-v-68036a57 data-v-d6170504><ul class="medias" style="--count:6;" data-v-d6170504><!--[--><li title="Disney&#39;s Oceans" style="background-image:url(/images/poster/oceans.png);" class="active item" data-v-d6170504><span class="playing" data-v-d6170504> Now Playing <span class="dot" data-v-d6170504></span></span><span class="name" data-v-d6170504>mp4/webm/ogv</span></li><li title="Sintel" style="background-image:url(//d2zihajmogu5jn.cloudfront.net/sintel/poster.png);" class="item" data-v-d6170504><span class="duration" data-v-d6170504>14:56</span><span class="name" data-v-d6170504>m3u8/mp4</span></li><li title="Apple&#39;s test HLS stream" style="background-image:url(//d2zihajmogu5jn.cloudfront.net/bipbop-advanced/poster.png);" class="item" data-v-d6170504><span class="duration" data-v-d6170504>30:08</span><span class="name" data-v-d6170504>m3u8 HLS stream</span></li><li title="Elephant&#39;s Dream (HLS with captions, audio description and chapters)" style="background-image:url(//d2zihajmogu5jn.cloudfront.net/elephantsdream/poster.png);" class="item" data-v-d6170504><span class="duration" data-v-d6170504>10:12</span><span class="name" data-v-d6170504>HLS/captions/description/chapters</span></li><li title="Elephant&#39;s Dream (mp4 with separate text track audio description, captions, and chapters)" style="background-image:url(//d2zihajmogu5jn.cloudfront.net/elephantsdream/poster.png);" class="item" data-v-d6170504><span class="duration" data-v-d6170504>10:12</span><span class="name" data-v-d6170504>mp4/captions/description/chapters</span></li><li title="" style="background-image:url(/images/example/4.jpg);" class="item" data-v-d6170504><!----><span class="name" data-v-d6170504>HLS Live stream</span></li><!--]--></ul></div><div class="player-wrapper" data-v-68036a57><div class="top" data-v-68036a57><div data-vjs-player class="video-player vjs-big-play-centered loading" data-v-68036a57><video class="video-js v-video-player"></video><!----></div><div class="right" style="height:380px;" data-v-68036a57><div class="config-controls" data-v-68036a57 data-v-8ee3a6f2><div class="item" data-v-8ee3a6f2><span class="name" data-v-8ee3a6f2> height (<code data-v-8ee3a6f2>380</code>) </span><input class="value" type="range" min="280" max="400" value="380" data-v-8ee3a6f2></div><div class="item" data-v-8ee3a6f2><span class="name" data-v-8ee3a6f2> volume (<code data-v-8ee3a6f2>0.8</code>) </span><input class="value" type="range" min="0" max="1" step="0.1" value="0.8" data-v-8ee3a6f2></div><div class="item" data-v-8ee3a6f2><span class="name" data-v-8ee3a6f2> playbackRate (<code data-v-8ee3a6f2>1</code>) </span><input class="value" type="range" min="0.5" max="3" step="0.25" value="1" data-v-8ee3a6f2></div><div class="item inline" data-v-8ee3a6f2><span class="name" data-v-8ee3a6f2>playbackRates</span><select class="value" data-v-8ee3a6f2><!--[--><option data-v-8ee3a6f2>[
  1,
  2,
  3
]</option><option data-v-8ee3a6f2>[
  0.5,
  1.5,
  2.5
]</option><!--]--></select></div><label class="item inline" data-v-8ee3a6f2><span class="name" data-v-8ee3a6f2> muted (<code data-v-8ee3a6f2>false</code>) </span><input class="value" type="checkbox" data-v-8ee3a6f2></label><label class="item inline" data-v-8ee3a6f2><span class="name" data-v-8ee3a6f2> loop (<code data-v-8ee3a6f2>false</code>) </span><input class="value" type="checkbox" data-v-8ee3a6f2></label><label class="item inline" data-v-8ee3a6f2><span class="name" data-v-8ee3a6f2> fluid (<code data-v-8ee3a6f2>false</code>) </span><input class="value" type="checkbox" data-v-8ee3a6f2></label><label class="item inline" data-v-8ee3a6f2><span class="name" data-v-8ee3a6f2> controls (<code data-v-8ee3a6f2>true</code>) </span><input class="value" type="checkbox" checked data-v-8ee3a6f2></label><label class="item inline" data-v-8ee3a6f2><span class="name" data-v-8ee3a6f2> custom controls (<code data-v-8ee3a6f2>true</code>) </span><input class="value" type="checkbox" checked data-v-8ee3a6f2></label></div></div></div><div class="bottom" data-v-68036a57><ul class="state-detail" data-v-68036a57 data-v-8be6274f><!--[--><li class="col-6 item" title="" data-v-8be6274f><span class="key" data-v-8be6274f>src</span><code class="value" data-v-8be6274f></code></li><li class="col-6 item" title="" data-v-8be6274f><span class="key" data-v-8be6274f>currentSrc</span><code class="value" data-v-8be6274f></code></li><li class="col-6 item" title="" data-v-8be6274f><span class="key" data-v-8be6274f>currentSource</span><code class="value" data-v-8be6274f></code></li><li class="col-6 item" title="" data-v-8be6274f><span class="key" data-v-8be6274f>poster</span><code class="value" data-v-8be6274f></code></li><li class="col-1 item" title="" data-v-8be6274f><span class="key" data-v-8be6274f>width</span><code class="value" data-v-8be6274f></code></li><li class="col-1 item" title="" data-v-8be6274f><span class="key" data-v-8be6274f>height</span><code class="value" data-v-8be6274f></code></li><li class="col-1 item" title="" data-v-8be6274f><span class="key" data-v-8be6274f>currentWidth</span><code class="value" data-v-8be6274f></code></li><li class="col-1 item" title="" data-v-8be6274f><span class="key" data-v-8be6274f>currentHeight</span><code class="value" data-v-8be6274f></code></li><li class="col-1 item" title="" data-v-8be6274f><span class="key" data-v-8be6274f>videoWidth</span><code class="value" data-v-8be6274f></code></li><li class="col-1 item" title="" data-v-8be6274f><span class="key" data-v-8be6274f>videoHeight</span><code class="value" data-v-8be6274f></code></li><li class="col-1 item" title="" data-v-8be6274f><span class="key" data-v-8be6274f>playing</span><code class="value" data-v-8be6274f></code></li><li class="col-1 item" title="" data-v-8be6274f><span class="key" data-v-8be6274f>waiting</span><code class="value" data-v-8be6274f></code></li><li class="col-1 item" title="" data-v-8be6274f><span class="key" data-v-8be6274f>seeking</span><code class="value" data-v-8be6274f></code></li><li class="col-1 item" title="" data-v-8be6274f><span class="key" data-v-8be6274f>paused</span><code class="value" data-v-8be6274f></code></li><li class="col-1 item" title="" data-v-8be6274f><span class="key" data-v-8be6274f>ended</span><code class="value" data-v-8be6274f></code></li><li class="col-1 item" title="" data-v-8be6274f><span class="key" data-v-8be6274f>controls</span><code class="value" data-v-8be6274f></code></li><li class="col-1 item" title="" data-v-8be6274f><span class="key" data-v-8be6274f>muted</span><code class="value" data-v-8be6274f></code></li><li class="col-1 item" title="" data-v-8be6274f><span class="key" data-v-8be6274f>volume</span><code class="value" data-v-8be6274f></code></li><li class="col-1 item" title="" data-v-8be6274f><span class="key" data-v-8be6274f>duration</span><code class="value" data-v-8be6274f></code></li><li class="col-2 item" title="" data-v-8be6274f><span class="key" data-v-8be6274f>currentTime</span><code class="value" data-v-8be6274f></code></li><li class="col-1 item" title="" data-v-8be6274f><span class="key" data-v-8be6274f>language</span><code class="value" data-v-8be6274f></code></li><li class="col-2 item" title="" data-v-8be6274f><span class="key" data-v-8be6274f>playbackRates</span><code class="value" data-v-8be6274f></code></li><li class="col-1 item" title="" data-v-8be6274f><span class="key" data-v-8be6274f>playbackRate</span><code class="value" data-v-8be6274f></code></li><li class="col-1 item" title="" data-v-8be6274f><span class="key" data-v-8be6274f>isFullscreen</span><code class="value" data-v-8be6274f></code></li><li class="col-1 item" title="" data-v-8be6274f><span class="key" data-v-8be6274f>isInPictureInPicture</span><code class="value" data-v-8be6274f></code></li><li class="col-1 item" title="" data-v-8be6274f><span class="key" data-v-8be6274f>isLive</span><code class="value" data-v-8be6274f></code></li><li class="col-1 item" title="" data-v-8be6274f><span class="key" data-v-8be6274f>readyState</span><code class="value" data-v-8be6274f></code></li><li class="col-1 item" title="" data-v-8be6274f><span class="key" data-v-8be6274f>networkState</span><code class="value" data-v-8be6274f></code></li><li class="col-4 item" title="" data-v-8be6274f><span class="key" data-v-8be6274f>error</span><code class="value" data-v-8be6274f></code></li><li class="col-2 item" title="" data-v-8be6274f><span class="key" data-v-8be6274f>buffered</span><code class="value" data-v-8be6274f></code></li><li class="col-2 item" title="" data-v-8be6274f><span class="key" data-v-8be6274f>seekable</span><code class="value" data-v-8be6274f></code></li><li class="col-2 item" title="" data-v-8be6274f><span class="key" data-v-8be6274f>played</span><code class="value" data-v-8be6274f></code></li><li class="col-2 item" title="" data-v-8be6274f><span class="key" data-v-8be6274f>bufferedPercent</span><code class="value" data-v-8be6274f></code></li><li class="col-1 item" data-v-8be6274f><span class="key" data-v-8be6274f>audioTracks</span><code class="value" data-v-8be6274f></code></li><li class="col-1 item" data-v-8be6274f><span class="key" data-v-8be6274f>videoTracks</span><code class="value" data-v-8be6274f></code></li><li class="col-1 item" data-v-8be6274f><span class="key" data-v-8be6274f>textTracks</span><code class="value" data-v-8be6274f></code></li><li class="col-1 item" title="" data-v-8be6274f><span class="key" data-v-8be6274f>userActive</span><code class="value" data-v-8be6274f></code></li><!--]--></ul></div></div></div></div><!--]--><!--]--></div></div><!----></div><div class="example-item" data-v-cb6e1e68><div class="homepage-card" data-v-cb6e1e68 data-v-84eeb999><div class="header" data-v-84eeb999><span data-v-84eeb999>Basic player (Vue)</span><!--[--><div class="actions" data-v-cb6e1e68><!--[--><!--]--><button class="code-button" data-v-cb6e1e68><i class="iconfont icon-code" data-v-cb6e1e68></i></button></div><!--]--></div><div class="content" data-v-84eeb999><!--[--><!--[--><div class="video-player-example"><div data-vjs-player class="video-player vjs-big-play-centered" data-v-b071d399><video class="video-js v-video-player"></video><!----></div></div><!--]--><!--]--></div></div><!----></div><div class="example-item" data-v-cb6e1e68><div class="homepage-card" data-v-cb6e1e68 data-v-84eeb999><div class="header" data-v-84eeb999><span data-v-84eeb999>Custom player (Vue)</span><!--[--><div class="actions" data-v-cb6e1e68><!--[--><!--]--><button class="code-button" data-v-cb6e1e68><i class="iconfont icon-code" data-v-cb6e1e68></i></button></div><!--]--></div><div class="content" data-v-84eeb999><!--[--><!--[--><div class="video-player-example"><div data-vjs-player class="video-player vjs-theme-forest" data-v-0d1856c7><video class="video-js v-video-player"></video><!----></div></div><!--]--><!--]--></div></div><!----></div><div class="example-item" data-v-cb6e1e68><div class="homepage-card" data-v-cb6e1e68 data-v-84eeb999><div class="header" data-v-84eeb999><span data-v-84eeb999>HLS Live player (Vue)</span><!--[--><div class="actions" data-v-cb6e1e68><!--[--><!--]--><button class="code-button" data-v-cb6e1e68><i class="iconfont icon-code" data-v-cb6e1e68></i></button></div><!--]--></div><div class="content" data-v-84eeb999><!--[--><!--[--><div class="video-player-example"><div data-vjs-player class="video-player vjs-theme-forest" data-v-7c7279ae><video class="video-js v-video-player"></video><!----></div></div><!--]--><!--]--></div></div><!----></div><div class="example-item" data-v-cb6e1e68><div class="homepage-card" data-v-cb6e1e68 data-v-84eeb999><div class="header" data-v-84eeb999><span data-v-84eeb999>DASH player (Vue)</span><!--[--><div class="actions" data-v-cb6e1e68><!--[--><!--]--><button class="code-button" data-v-cb6e1e68><i class="iconfont icon-code" data-v-cb6e1e68></i></button></div><!--]--></div><div class="content" data-v-84eeb999><!--[--><!--[--><div class="video-player-example"><div data-vjs-player class="video-player vjs-theme-forest" data-v-c6d51d21><video class="video-js v-video-player"></video><!----></div></div><!--]--><!--]--></div></div><!----></div><div class="example-item" data-v-cb6e1e68><div class="homepage-card" data-v-cb6e1e68 data-v-84eeb999><div class="header" data-v-84eeb999><span data-v-84eeb999>FLV player (Vue)</span><!--[--><div class="actions" data-v-cb6e1e68><!--[--><!--]--><button class="code-button" data-v-cb6e1e68><i class="iconfont icon-code" data-v-cb6e1e68></i></button></div><!--]--></div><div class="content" data-v-84eeb999><!--[--><!--[--><div class="video-player-example"><div data-vjs-player class="video-player vjs-theme-forest" data-v-bdfcfe37><video class="video-js v-video-player"></video><!----></div></div><!--]--><!--]--></div></div><!----></div><div class="example-item" data-v-cb6e1e68><div class="homepage-card" data-v-cb6e1e68 data-v-84eeb999><div class="header" data-v-84eeb999><span data-v-84eeb999>Example player (React)</span><!--[--><div class="actions" data-v-cb6e1e68><!--[--><!--]--><button class="code-button" data-v-cb6e1e68><i class="iconfont icon-code" data-v-cb6e1e68></i></button></div><!--]--></div><div class="content" data-v-84eeb999><!--[--><!--[--><div class="video-player-example"><div class="react-container"></div></div><!--]--><!--]--></div></div><!----></div><!--]--></div><!--]--><!----></div></main><!--]--><footer class="footbar" data-v-7c10dc62 data-v-6630103c><div class="container" data-v-6630103c><span class="footer-content" data-v-6630103c><a href="https://github.com/surmon-china/videojs-player" rel="external nofollow noopener" target="_blank" data-v-6630103c>videojs-player</a><span data-v-6630103c> is maintained by </span><a href="https://github.com/surmon-china" rel="external nofollow noopener" target="_blank" data-v-6630103c>@surmon-china</a></span></div></footer></div></div>
  

</body>
</html>
